<template>
  <div>
    <el-drawer
      destroy-on-close
      :title="`${state.nodeData.type === 'line' ? '线' : '节点'}操作`"
      v-model="state.isOpen"
      size="420px"
    >
      <el-scrollbar>
        <Lines
          v-if="state.nodeData.type === 'line'"
          :hide-tool="hideTool"
          @change="onLineChange"
          @close="close"
          ref="lineRef"
        />
        <Nodes
          v-else
          @submit="onNodeSubmit"
          :hide-tool="hideTool"
          :ui-form-items="uiFormItems"
          :jsplumb-data="jsplumbData"
          @close="close"
          ref="nodeRef"
        />
      </el-scrollbar>
    </el-drawer>
  </div>
</template>

<script setup lang="ts" name="pagesWorkflowDrawer">
import { defineAsyncComponent, reactive, ref, nextTick } from 'vue'
import type { BusinessUIQueryColumnType } from '@/types/custom'

interface Props {
  hideTool?: boolean
  uiFormItems: BusinessUIQueryColumnType[]
  jsplumbData: {
    nodeList: TypedAny[]
    lineList: TypedAny[]
  }
}

defineProps<Props>()

// 定义子组件向父组件传值/事件
const emit = defineEmits(['line', 'node'])

// 引入组件
const Lines = defineAsyncComponent(() => import('./line.vue'))
const Nodes = defineAsyncComponent(() => import('./node.vue'))

// 定义变量内容
const lineRef = ref()
const nodeRef = ref()
const state = reactive<WorkflowDrawerState>({
  isOpen: false,
  nodeData: {
    icon: '',
    className: '',
    id: '',
    nodeId: '',
    form: [],
    nodeType: 0,
    approvalUserType: 0,
    descript: '',
    label: '',
    roleId: ''
  },
  jsplumbConn: {}
})

// 打开抽屉
const open = (item: WorkflowDesignNode, conn: EmptyObjectType) => {
  state.isOpen = true
  state.jsplumbConn = conn
  state.nodeData = item
  nextTick(() => {
    setTimeout(() => {
      if (item.type === 'line') lineRef.value.getParentData(item)
      else nodeRef.value.getParentData(item)
    }, 300)
  })
}
// 关闭
const close = () => {
  state.isOpen = false
}
// 线 label 内容改变时
const onLineChange = (line: { label: string; id: string }) => {
  state.jsplumbConn.label = line.label
  state.jsplumbConn.id = line.id
  emit('line', state.jsplumbConn)
}
// 节点内容改变时
const onNodeSubmit = (data: object) => {
  emit('node', data)
}

// 暴露变量
defineExpose({
  open
})
</script>
